<script setup>
import { defineProps } from 'vue'
import { ChatLineRound, Star } from '@element-plus/icons-vue'

const props = defineProps({
    comment: {
        type: Object,
        required: true
    },
    allComments: {
        type: Array,
        default: () => []
    }
})

const formatTime = (timestamp) => {
    // 将字符串时间转换为Date对象
    const dateObj = new Date(timestamp)
    // 获取毫秒时间戳
    const timestampMs = dateObj.getTime()
    const now = Date.now()
    const diff = now - timestampMs
    // 1分钟内显示"刚刚"
    if (diff < 60000) return '刚刚'

    // 1小时内显示"X分钟前"
    if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`

    // 1天内显示"X小时前"
    if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`

    // 超过1天显示具体日期
    return new Date(timestamp).toLocaleDateString()
}

const getParentUsername = (parentId) => {
    const parent = props.allComments.find(c => c.id === parentId)
    return parent?.username || '已删除用户'
}
</script>

<template>
    <div class="comment-node">
        <el-card class="comment-card" :body-style="{ padding: '15px' }">
            <div class="comment-header">
                <el-avatar :size="40" :src="comment.userPic" />
                <div class="user-info">
                    <div class="username">{{ comment.username }}</div>
                    <div class="time">{{ formatTime(comment.createTime) }}</div>
                </div>
            </div>

            <div class="comment-content">
                <span v-if="comment.parentId" class="reply-to">
                    回复 @{{ getParentUsername(comment.parentId) }}
                </span>
                {{ comment.content }}
            </div>

            <div class="comment-actions">
                <el-button text type="primary" @click="$emit('reply', comment)">
                    <el-icon>
                        <ChatLineRound />
                    </el-icon>
                    回复
                </el-button>

                <el-button text type="primary" @click="$emit('like', comment)">
                    <el-icon>
                        <Star />
                    </el-icon>
                    {{ comment.likeCount }} 点赞
                </el-button>
            </div>
        </el-card>
    </div>
</template>



<style scoped>
.comment-node {
    margin-bottom: 15px;
}

.comment-card {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.comment-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.user-info {
    margin-left: 15px;
}

.username {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.time {
    font-size: 12px;
    color: #999;
}

.comment-content {
    margin: 10px 0;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
}

.reply-to {
    color: #409eff;
    margin-right: 8px;
    font-weight: 500;
}

.comment-actions {
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    gap: 15px;
}

.comment-actions .el-button {
    padding: 0;
    height: auto;
    font-size: 13px;
}
</style>